<template>
    <div class = "countup-wrapper"> 
		<div class="count-title">{{ titleName }}</div>
        <i-count-up
            :startVal="startVal"
            :endVal="countNum"
            :decimals="decimals"
            :duration="duration"
            :options="options"
            @ready="onReady"
            class="count-number"
        ></i-count-up>
    </div>
</template>

<script>
import ICountUp from 'vue-countup-v2';
export default {
    name: 'CountUp',
    props: {
        titleName: {
            type: String,
            default: ''
        },
        countNum: {
            type: Number,
            default: 0
        }
    },
	data(){
		return {
			startVal: 0,
            decimals: 0,
            duration: 1,
            options: {
                useEasing: true,
                useGrouping: true,
                separator: ',',
                decimal: '.',
                prefix: '',
                suffix: ''
            }
		}
	},

	computed:{
		
	},

	destroyed(){
	},

	components:{
        'i-count-up': ICountUp
	},

	methods:{
		onReady: function(instance, CountUp) {
            this.startVal = this.countNum
      }
	}
	
}
</script>

<style lang="scss">
.countup-wrapper{
    margin-bottom: 3px;
	.count-title{
        font-weight: 700;
        border-left: 4px #1e9cf3 solid;
        padding-left: 5px;
    }
    .count-number{
        font-size: 35px;
        color: #1181fb;
    }
}
</style>